import React from "react";
import classNames from 'classnames'

export enum ButtonSize{
  large= 'lg',
  small='sm'
}

export enum ButtonType{
  primary='pry',
  def='def',
  danger='dgr',
  link= 'link'
}

interface ButtonProps {
  className?: string
  size?: string
  types?: string
  disabled?: boolean
  chrdn?: React.ReactNode,
  href?: string
}

type NativeButtonProps = ButtonProps & React.ButtonHTMLAttributes<HTMLElement>
type AButtonProps = ButtonProps & React.AreaHTMLAttributes<HTMLElement>
export type ButtonPropsAll = Partial<NativeButtonProps & AButtonProps>

export const Button: React.FC<ButtonPropsAll> = ({
  size,
  className,
  chrdn,
  children,
  types,
  disabled,
  href,
  ...restProps
}) => {
  // 类名的操作
  let classer = classNames('btn',className,{
    [`btn-${types}`]: types,
    [`btn-${size}`]: size,
    'disabled-link': ButtonType.link === types && disabled,
    'disabled-btn': ButtonType.link !== types && disabled
  })


  if (ButtonType.link === types) {
    if (!disabled) {
      return (
        <a href={href} className={classer} {...restProps}>
          {children}
        </a>
      )
    } else {
      return (
        <a href={href} className={classer}>
          {children}
        </a>
      )
    }
  } else {
    return (
      <button className={classer} disabled={disabled} {...restProps}>
        {children}
      </button>
    )
  }
}

Button.defaultProps = {
  disabled: false,
  types: ButtonType.def
}